<template>
  <div class="attributions">
    <div class="map" id="map"></div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';

import 'ol/ol.css';
import Map from 'ol/Map';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';
import { Attribution, defaults as defaultControls } from 'ol/control';

@Component({
  components: {},
})
export default class Attributions extends Vue {
  private attribution = new Attribution({
    collapsible: false,
  });

  private map: any = null;

  public mounted() {
    this.createMap(()=>{
      window.addEventListener('resize',()=>{
        this.checkSize();
      })
    });
  }

  public createMap(cb:any ){
    this.map = new Map({
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      controls: defaultControls({ attribution: false }).extend([this.attribution]),
      target: 'map',
      view: new View({
        center: [0, 0],
        zoom: 2,
      }),
    });

    if(this.map){
      cb && cb()
    }
  }

  public checkSize() {
    let small = this.map.getSize()[0] < 600;
    this.attribution.setCollapsible(small);
    this.attribution.setCollapsed(small);
  }
}
</script>
<style lang="less" scoped>
.map {
  height: calc(100vh - 274px);
  width: 100%;
}
</style>